const li = document.querySelectorAll('.li'),
    imgList = document.getElementsByClassName('img')
const ol = document.querySelectorAll('.li-o');
console.log(ol);

var token = localStorage.getItem('mytoken');




var adname = localStorage.getItem('name');
const youname = document.querySelector('.yourname')
youname.innerHTML = adname

//跳转效果
for (let i = 0; i < ol.length; i++) {
    ol[i].onclick = function() {
        if (i === 0) {
            window.location.href = '后台用户列表.html'
        } else if (i === 1) {
            // window.location.href = '后台漫画详情列表.html'
        } else if (i === 2) {
            window.location.href = '后台留言.html'
        } else if (i === 3) {
            window.location.href = '管理员.html'
        }
    }
}




const dd = document.querySelector('.sel')
console.log(dd);
dd.onclick = function() {
    console.log(1);
    window.location.href = 'personMan.html'
}

//下拉列表

const admin = document.querySelector('.admin');
const liLis = admin.getElementsByTagName('li');
console.log(liLis);

const sec = document.querySelector('.section');
sec.addEventListener('mousemove', function() {
    admin.style.top = 50 + 'px';
    admin.style.opacity = 1;
    // admin.style.zIndex = -1

})
let timer;
sec.addEventListener('mouseleave', function() {

    timer = setTimeout(function() {
        admin.style.top = 800 + 'px';
        admin.style.opacity = 0;
    }, 20)

})
admin.addEventListener('mousemove', function() {
    clearTimeout(timer)
    admin.style.top = 50 + 'px';
    admin.style.opacity = 1;
    admin.style.zIndex = 1001

})

admin.addEventListener('mouseleave', function() {
    let timer;
    timer = setTimeout(function() {
        admin.style.top = 150 + 'px';
        admin.style.opacity = 0;
    })


})


//获取admin下的li列表
liLis[0].onclick = function() {
        window.location.href = 'imgManeger.html'
    }
    //点击侧边栏样式改变
for (var i = 0; i < li.length; i++) {
    li[i].addEventListener('click', function() {
        for (var i = 0; i < li.length; i++) {
            li[i].className = ''
        }
        this.className = 'corlor'
    })
}


//侧边栏下拉列表效果
console.log(imgList)
var sum = 0;
for (let i = 0; i < li.length; i++) {
    li[i].onclick = function() {
        // this.className = 'color'
        sum++;
        var h = i;
        if (sum % 2 !== 0) {
            ol[h].style.overflow = 'visible';
            ol[h].style.height = 52 + "px";
            imgList[h].style.transform = "rotateZ(90deg)";
            imgList[h].style.transition = 'all 0.2s';
        } else {
            ol[h].style.overflow = 'hidden';
            ol[h].style.height = 0;
            imgList[h].style.transform = 'rotateZ(0)'
            imgList[h].style.transition = 'all 0.2s'
        }
        console.log(ol);

        ol[h].addEventListener('click', function(e) {
            console.log(1111);
            sum = 0; //让sum一直为偶数 二级菜单不隐藏
        })
        console.log(sum);
    }



}
//点击汉堡图标侧边栏移动
const hanbao = document.querySelector('.hanbao');
const letf_nav = document.querySelector('.left-nav');
var count = 0;
const container = document.querySelector('.container')
hanbao.onclick = function() {
    count++;
    if (count % 2 !== 0) {
        letf_nav.style.left = -220 + "px";
        container.style.width = 100 + '%'
        container.style.left = 0 + 'px';
        container.style.transition = 'all 0.2s'
    } else {
        letf_nav.style.left = 0 + "px";
        container.style.left = 220 + 'px'
            // container.style.left = 0 + 'px';
        container.style.transition = 'all 0.2s'
        container.style.width = 88.4 + '%'

    }
}

var iscar = 0;
//点击修改弹出模态框
const model = document.querySelector('.model')
const up = document.querySelector('.zhangjie');
const news = document.getElementsByName('g');
up.addEventListener('click', function(e) {
    console.log(e.target);
    //判断修改按钮
    if (e.target.name === 'g') {
        const kal = e.target.dataset.id;
        iscar = kal;
        diaTail(iscar);
        boxx.style.display = 'block'
    }
    //判断删除按钮
    if (e.target.name === 'delete') {
        const flag = confirm('是否删除?')
        if (flag == true) {
            console.log('你点了确认');
            deletzhangjie(e.target.id)
        } else(
            console.log('你点了取消')
        )
    }
})

//模态框的关闭按钮
const guanbi = document.querySelector('.guanbi');
guanbi.onclick = function() {
    model.style.visibility = 'hidden'
}

//退出
const logout = document.querySelector('.logout');
logout.onclick = function() {
    window.location.href = 'login.html'
}

//添加按钮弹出模态框
// const look = document.querySelector('.look');
// look.addEventListener('click', function() {
//     model.style.visibility = 'visible'
// })
//获取漫画章节列表


function getCarton() {
    $.ajax({
        url: `http://192.168.3.184:7001/chapter`,
        type: 'get',
        headers: {
            token
        },
        success: (res) => {
            console.log(res);
            const _content = document.querySelector('.zhangjie');
            const showContent = () => {
                //每次清空

                _content.innerHTML = '';
                _content.innerHTML = `<th>ID</th>
                    <th>标题</th>
                
                    <th>序号</th>
                    <th>操作</th>`
                res.data.forEach((item, index) => {
                    //遍历计算方法，当前为第1页，一页2个，以此类推
                    // console.log(item, index);

                    const tr = document.createElement('tr');
                    tr.innerHTML = `<td>${item.id}</td>
                        <td><a href="漫画内容.html" data-id='${item.nshow}'>${item.title}</a></td>
                         
                            <td>${item.nshow}</td>
                         
                            <td>
                            <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />

                            <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                            </td>`
                        // <img src='.\\imges\\ussss.png' class="btn " name="gt" data-id='${item.id}' />

                    _content.appendChild(tr)
                    const a = _content.querySelectorAll('a')
                    console.log(a);

                    for (const i of a) {

                        console.log(i.dataset.id);


                        i.addEventListener('click', function() {
                            localStorage.setItem('data', i.dataset.id)
                            console.log(1);

                        })


                    }
                })
            }
            showContent();

        }

    })
}
// getCarton()



//增加
function addCarton(title, nshow) {
    $.ajax({
        url: `http://192.168.3.184:7001/chapter`,
        type: 'post',
        headers: {
            token
        },
        data: {
            title,
            nshow
        },
        success: (res) => {
            // console.log(res);
            window.location.reload();
        }

    })
}

//删除
function deletzhangjie(id) {
    $.ajax({
        url: `http://192.168.3.184:7001/chapter/${id}`,
        type: 'delete',
        headers: {
            token
        },
        success: (res) => {
            console.log(res);
            window.location.reload();
        }
    })

}

const fwbk = document.querySelector('.w-e-text')
    // console.log();
    // butt1.addEventListener('click', function() {
    //     console.log(fwbk.value);
    //     console.log(1);
    // })
    //设置富文本框
const E = window.wangEditor
const editor = new E('#div1');

//配置服务器接口地址
editor.config.uploadImgServer = '/upload-img'
    // 或者 const editor = new E( document.getElementById('div1') )
    // editor.style.width = 500
editor.create();
//获取章节详情
function diaTail(id) {
    $.ajax({
        url: `http://192.168.3.184:7001/chapter/${id}`,
        type: 'get',
        headers: {
            token
        },
        success: (res) => {
            console.log(res);
            const fwbk = document.querySelector('.w-e-text');

            console.log(res.data.title);
            fwbk.innerText = ''
            fwbk.innerText = res.data.title;
            // const ad = editor.txt.text();
            // gaiDisc()

        }
    })
}


//分页
function getPage(page, pageSize) {
    $.ajax({
        url: `http://192.168.3.184:7001/chapter`,
        type: 'get',
        headers: {
            token
        },
        data: {
            page,
            pageSize
        },
        success: (res) => {
            console.log(res);
            const _content = document.querySelector('.zhangjie');
            const showContena = () => {
                //每次清空

                _content.innerHTML = '';
                _content.innerHTML = `<th>ID</th>
                    <th>标题</th>
                
                    <th>序号</th>
                   
                    <th>操作</th>`
                res.data.forEach((item, index) => {
                    //遍历计算方法，当前为第1页，一页2个，以此类推
                    // console.log(item, index);

                    // if (index >= (cur - 1) * size && index < cur * size) {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `<td>${item.id}</td>
                        <td><a href="漫画内容.html" data-id='${item.nshow}'>${item.title}</a></td>
                         
                            <td>${item.nshow}</td>
                          
                            <td>
                            <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />

                            <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                            </td>`
                        // <img src='.\\imges\\ussss.png' class="btn " name="gt" data-id='${item.id}' />

                    _content.appendChild(tr)
                        // }
                    const a = _content.querySelectorAll('a')
                    console.log(a);

                    for (const i of a) {

                        console.log(i.dataset.id);


                        i.addEventListener('click', function() {
                            localStorage.setItem('data', i.dataset.id)
                            console.log(1);

                        })


                    }
                })
            }

            showContena()
        }
    })
}

//修改章节
function gaiDisc(id, title, nshow) {
    $.ajax({
        url: `http://192.168.3.184:7001/chapter/${id}`,
        type: 'put',
        headers: {
            token
        },
        data: {
            id,
            title,
            nshow
        },
        success: (res) => {
            console.log(res);
            window.location.reload();
        }
    })
}

//搜索章节
var s;
const search_btn = document.querySelector('.search-btn'),
    search_txt = document.querySelector('.search-txt');
search_btn.addEventListener('click', function() {
    const se = search_txt.value;
    serzhang(se);
    s = se
})

// var token = localStorage.getItem('mytoken')

function serzhang(title) {
    $.ajax({
        url: `http://192.168.3.184:7001/chapter`,
        type: 'get',
        headers: {
            token
        },
        data: {
            title
        },
        success: (res) => {
            console.log(res);
            const _content = document.querySelector('.zhangjie');
            _content.innerHTML = ''
            const showContent = () => {
                //每次清空

                _content.innerHTML = '';
                _content.innerHTML = `<th>ID</th>
                    <th>标题</th>
                
                    <th>序号</th>
                   
                    <th>操作</th>`
                res.data.forEach((item, index) => {
                    //遍历计算方法，当前为第1页，一页2个，以此类推
                    // console.log(item, index);

                    // if (index >= (cur - 1) * size && index < cur * size) {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `<td>${item.id}</td>
                        <td><a href="漫画内容.html" data-id='${item.nshow}'>${item.title}</a></td>
                         
                            <td>${item.nshow}</td>
                          
                            <td>
                            <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />

                            <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                            </td>`
                        // <img src='.\\imges\\ussss.png' class="btn " name="gt" data-id='${item.id}' />

                    _content.appendChild(tr)
                        // }
                    const a = _content.querySelectorAll('a')
                    console.log(a);

                    for (const i of a) {

                        console.log(i.dataset);


                        i.addEventListener('click', function() {
                            localStorage.setItem('data', i.dataset.id)
                            console.log(1);

                        })


                    }
                })
            }

            showContent()


            const pageCount = Math.ceil(res.num / 10);
            const _pagination = document.querySelector('.pagination');
            _pagination.innerHTML = ''

            console.log(_pagination);
            const cre = () => {
                for (let i = 1; i <= pageCount; i++) {
                    const li = document.createElement('li');

                    li.className = 'page-number'
                    li.id = `${i}`
                    li.innerHTML = `${i}`
                    _pagination.appendChild(li)

                }
                const a = document.querySelectorAll('.pagination>li');
                a[0].className = 'co'
                console.log(a);

                for (let i = 0; i < a.length; i++) {
                    a[i].addEventListener('click', function(e) {
                        $(e.target).attr('class', 'co').siblings('li').attr('class', 'cc')
                        getzhangjie(title, e.target.id, 10)
                        console.log(e.target);

                    })
                }
                // _pagination.addEventListener('click', function(e) {
                //     $(e.target).attr('class', 'co').siblings('li').attr('class', 'cc')


                //     getPage(e.target.id)
                // })
            }
            cre();
        }
    })
}


//章节新分页
function getzhangjie(title, page, pageSize) {
    $.ajax({
        url: `http://192.168.3.184:7001/chapter`,
        type: 'get',
        headers: {
            token
        },
        data: {
            title,
            page,
            pageSize
        },
        success: (res) => {
            console.log(res);
            const _content = document.querySelector('.zhangjie');
            const showContena = () => {
                //每次清空

                _content.innerHTML = '';
                _content.innerHTML = `<th>ID</th>
                    <th>标题</th>
                
                    <th>序号</th>
                   
                    <th>操作</th>`
                res.data.forEach((item, index) => {
                    //遍历计算方法，当前为第1页，一页2个，以此类推
                    // console.log(item, index);

                    // if (index >= (cur - 1) * size && index < cur * size) {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `<td>${item.id}</td>
                        <td><a href="漫画内容.html" data-id='${item.nshow}'>${item.title}</a></td>
                         
                            <td>${item.nshow}</td>
                          
                            <td>
                            <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />

                            <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                            </td>`
                        // <img src='.\\imges\\ussss.png' class="btn " name="gt" data-id='${item.id}' />

                    _content.appendChild(tr)
                        // }
                    const a = _content.querySelectorAll('a')
                    console.log(a);

                    for (const i of a) {

                        console.log(i.dataset.id);


                        i.addEventListener('click', function() {
                            localStorage.setItem('data', i.dataset.id)
                            console.log(1);

                        })


                    }
                })
            }

            showContena()
        }
    })
}

const butt1 = document.querySelector('#butt1');

const butt2 = document.querySelector('#butt2');
const boxx = document.querySelector('.boxx');
butt2.addEventListener('click', function() {
    boxx.style.display = 'none'
})
butt1.addEventListener('click', function() {
    boxx.style.display = 'none';
    const text1 = editor.txt.text();
    console.log(text1);
    let first;
    first = 92;
    first++
    if (iscar === 0) {
        addCarton(text1, first);
    } else {
        // console.log(iscar, text1, first);
        gaiDisc(iscar, text1, first)
    }

})

const daa = document.querySelector('.daa');
daa.addEventListener('click', function() {
    iscar = 0;

    boxx.style.display = 'block'
})




function kan(page, pageSize) {
    // console.log(token_);
    $.ajax({
        url: `http://192.168.3.184:7001/chapter?page=${page}&pageSize=${pageSize}`,
        type: "GET",
        headers: {
            token: token
                // : localStorage.getItem('mytoken')
        },

        success: function(res) {
            console.log(res);


            // let size = 10,
            //     page = Math.ceil(res.data.length / size),
            //     pageCount = 5;

            // //当前选中的页数
            // let cur = 1;

            //显示内容列表
            const _content = document.querySelector('.zhangjie')
            const showContent = () => {
                //每次清空

                _content.innerHTML = '';
                _content.innerHTML = `<th width='100px'>ID</th>
                    <th>标题</th>
                
                    <th width='100'>序号</th>
                   
                    <th width='120'>操作</th>`
                res.data.forEach((item, index) => {
                    //遍历计算方法，当前为第1页，一页2个，以此类推
                    // console.log(item, index);

                    // if (index >= (cur - 1) * size && index < cur * size) {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `<td>${item.id}</td>
                            <td><a href="漫画内容.html" data-id='${item.nshow}'>${item.title}</a></td>
                         
                            <td>${item.nshow}</td>
                          
                            <td>
                            <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />

                            <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                            </td>`
                        // <img src='.\\imges\\ussss.png' class="btn " name="gt" data-id='${item.id}' />

                    _content.appendChild(tr)
                        // }
                })
                console.log(_content);

                const a = _content.querySelectorAll('a')
                console.log(a);

                for (const i of a) {
                    // console.log(a);

                    // console.log(i.dataset.id);


                    i.addEventListener('click', function() {
                        localStorage.setItem('data', i.dataset.id)
                        console.log(1);

                    })


                }

            }

            showContent()

            //创建分页
            const pageCount = Math.ceil(res.num / pageSize)
            const _pagination = document.querySelector('.pagination');
            console.log(_pagination);
            const cre = () => {
                for (let i = 1; i <= pageCount; i++) {
                    const li = document.createElement('li');

                    li.className = 'page-number'
                    li.id = `${i}`
                    li.innerHTML = `${i}`
                    _pagination.appendChild(li)

                }
                const a = document.querySelectorAll('.pagination>li');
                a[0].className = 'co'
                console.log(a);

                for (let i = 0; i < a.length; i++) {
                    a[i].addEventListener('click', function(e) {
                        $(e.target).attr('class', 'co').siblings('li').attr('class', 'cc')
                        getPage(e.target.id, pageSize)

                    })
                }
                // _pagination.addEventListener('click', function(e) {
                //     $(e.target).attr('class', 'co').siblings('li').attr('class', 'cc')


                //     getPage(e.target.id)
                // })
            }
            cre();
            //创建分页列表

            const createPagination = () => {

                    //拼接左右按钮
                    //当页数不为1为可点击态
                    let lis = ` <li class="material-icons page-btn page-btn-prev ${cur!==1?'isclick':''}">
                        <img src="./imges/箭头-左.png" alt=""></li>`;

                    if (cur < 1 || cur > page) {
                        throw `cur 参数最小值为1 最大值为${page}`
                    } else if (pageCount < 5) {
                        throw `pageCount 参数最小值5`
                    } else if (page <= pageCount) {
                        //总页数小于等于按钮数。直接遍历，不需省略号
                        for (let i = 1; i <= page; i++) {
                            lis += ` <li class="page-number ${i==cur?'active':''}">${i}</li>`
                        }
                    } else {
                        /// 保存当前分页前后数字按钮
                        let befNum = cur - (pageCount - 3) / 2,
                            aftNum = cur + (pageCount - 3) / 2;

                        //显示左省略按钮
                        if (cur >= pageCount - 1) {
                            lis += `<li class="page-number">1</li>
                                <li class="material-icons page-dot page-dot-prev">...</li>`
                        }

                        //解决显示0页码
                        //af为除去省略号后的一个按钮
                        //同理解决为页数为最大时后面不显示
                        if (cur >= 1 && cur < pageCount - 1) {
                            befNum = 1;
                            aftNum = pageCount - 1;
                        } else if (cur <= page && cur > page - (pageCount - 2)) {
                            aftNum = page
                        }

                        for (let i = befNum; i <= aftNum; i++) {
                            lis += ` <li class="page-number ${i==cur?'active':''}">${i}</li>`
                        }

                    }


                    //显示右省略按钮
                    if (cur <= page - (pageCount - 2)) {
                        lis += ` <li class="material-icons page-dot page-dot-next">...</li>
                        <li class="page-number">${page}</li>`
                    }

                    //拼接右
                    lis += ` <li class="material-icons page-btn page-btn-next ${cur!==page?'isclick':''}"> 
                        <img src="./imges/箭头-右.png" alt=""></li>`;


                    _pagination.innerHTML = lis;


                    //点击切换
                    const _pageNum = document.querySelectorAll('.page-number');
                    _pageNum.forEach((item) => {
                        item.addEventListener('click', () => {
                            //item.inne为字符串。转成数字
                            cur = parseInt(item.innerHTML);
                            createPagination();

                        })
                    })

                    //下一页
                    const _pagenext = document.querySelector('.page-btn-next');
                    // console.log(_pagenext);
                    _pagenext.addEventListener('click', () => {
                        if (cur !== page) {
                            cur++;
                            createPagination();
                        }
                    })

                    //上一页
                    const _pageprev = document.querySelector('.page-btn-prev');
                    _pageprev.addEventListener('click', () => {
                        if (cur !== 1) {
                            cur--;
                            createPagination();
                        }
                    })


                    //前进PC-2格子
                    //省略号时隐时现
                    var _paDotNext = document.querySelector('.page-dot-next');
                    if (_paDotNext) {
                        _paDotNext.addEventListener('click', () => {
                            cur += pageCount - 2;
                            createPagination();
                        })
                    }



                    //后退PC-2格子
                    //省略号时隐时现，所以用？
                    var _paDotpre = document.querySelector('.page-dot-prev');
                    if (_paDotpre) {
                        _paDotpre.addEventListener('click', () => {
                            cur -= pageCount - 2;
                            createPagination();
                        })
                    }

                }
                // createPagination();


        }

    })
}

kan(1, 20)

//获取admin下的li列表
liLis[0].onclick = function() {
    location.href = 'imgManeger.html'
}
liLis[1].onclick = function() {
    location.href = 'zhoubian.html'
}
liLis[2].onclick = function() {
    console.log(1);
    location.href = 'tuijian.html'
}

const shouye = document.getElementById('shouye');
shouye.addEventListener('click', function() {
    console.log(1);
    window.location.href = 'http://192.168.3.189:5501/layout/home_page.html'
})